<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="/css/circle/circle.css">
  <script src="/public/jQuery.min.js"></script>
  <link rel="stylesheet" href="/public/swiper-bundle.min.css">
  <!-- jq -->
  <script src="/public/jQuery.min.js"></script>
  <!-- jq -->
  <title>营友圈</title>
</head>

<body>
  <div id="callus">
    <!-- 头部  -->
    <div class="header">
      <header>
        {include  file="component/header" /}
      </header>
    </div>
    <!-- 头部  -->
    <!-- body -->
    <div class="circle">
      <!-- 热门活动 -->
      <div class="hotbox">
        <div class="hotbody">
          <div class="hotimg">
            <img src="{$yyq[2]['image']}" alt="">
          </div>
          <div class="hotimg">
            <div class="cargo">
              <p class="cargop">{$yyq[2]['title']}</p>
              <p class="cargotext">{$yyq[2]['abs']}</p>
              <div class="more"><a href="#">查看更多 >></a></div>
            </div>
          </div>
          <div class="hotimg">
            <div class="cargo2">
              <p class="cargop2">{$yyq[3]['title']}</p>
              <p class="cargotext2">{$yyq[3]['abs']}</p>
              <div class="more2"><a href="#">查看更多 >></a></div>
            </div>
          </div>
          <div class="hotimg">
            <img src="{$yyq[3]['image']}" alt="">
          </div>
          <div class="hotcenter">
            <p>VIEW DEALS</p>
          </div>
        </div>
      </div>
      <!-- 热门活动 -->
      <!-- 营友分享 -->
      <div class="share">
        <div class="titlebox">
          <p class="title-tit">营友分享</p>
          <p class="title-p">ACTIVITIES</p>
        </div>
        <div class="sharebox">
          <div class="sharetit">
            <div class="rollbut active" data-tab="rolltab1" onclick="openroll('rolltab1')">出境跟团</div>
            <div class="rollbut" data-tab="rolltab2" onclick="openroll('rolltab2')">海岛</div>
            <div class="rollbut" data-tab="rolltab3" onclick="openroll('rolltab3')">爆款巴厘岛</div>
          </div>
          <!-- one -->
          <div class="rolltab" id="rolltab1">
            <div class="shareswiper">
              <circles>
                {include  file="component/circles" /}
              </circles>
            </div>
          </div>
          <!-- two -->
          <div class="rolltab" id="rolltab2">
            <div class="shareswiper">
              <circles2>
                {include  file="component/circles2" /}
              </circles2>
            </div>
          </div>
          <!-- three -->
          <div class="rolltab" id="rolltab3">
            <div class="shareswiper">
              <circles3>
                {include  file="component/circles3" /}
              </circles3>
            </div>
          </div>
        </div>
      </div>
      <!-- 营友分享 -->
    </div>
    <!-- body -->
    <!-- 脚部 -->
    <div class="footer">
      <footer>
        {include  file="component/footer" /}
      </footer>
    </div>
    <!-- 脚部 -->
  </div>

     
  <script>
    // 头部尾部
    $(function () {
      // $("header").load("./components/header.html")
      // $("footer").load("./components/footer.html")
      // $("circles").load("./components/circles.html")
      // $("circles2").load("./components/circles2.html")
      // $("circles3").load("./components/circles3.html")
    });
    // 头部尾部
    // 选项卡切换
    function openroll(tabName) {
      var rolltabs = document.getElementsByClassName("rolltab");
      for (var i = 0; i < rolltabs.length; i++) {
        rolltabs[i].style.display = "none";
      }

      var rollbuttons = document.getElementsByClassName("rollbut");
      for (var i = 0; i < rollbuttons.length; i++) {
        rollbuttons[i].classList.remove("active");
      }

      document.getElementById(tabName).style.display = "block";
      document.querySelector(".rollbut[data-tab='" + tabName + "']").classList.add("active");
    }
    // 初始显示第一个选项卡
    openroll("rolltab1");
    // 选项卡切换
  </script>
</body>

</html>
